<template>
  <!-- 新建文件夹对话框 -->
  <el-dialog
    :title="modalTitle"
    :width="device === 'mobile' ? '400px' : '520px'"
    :visible.sync="visible"
    @close="onClose"
    class="file-input-dialog"
  >
    <el-input
      placeholder="请输入文件名称"
      v-model="name"
      class="input-with-select"
    >
      <el-select
        v-model="option"
        slot="prepend"
        placeholder="请选择"
      >
        <el-option
          v-if="exportType.includes('toWord')"
          label="生成word"
          value="toWord"
        ></el-option>
        <el-option
        v-if="exportType.includes('toExcel')"
          label="生成excel"
          value="toExcel"
        ></el-option>
        <el-option
        v-if="exportType.includes('toPdf')"
          label="生成pdf"
          value="toPdf"
        ></el-option>
        <el-option
        v-if="exportType.includes('toInfo')"
          label="推送至周报月评"
          value="toInfo"
        ></el-option>
      </el-select>
    </el-input>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="onClose"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        :disabled="!name.length"
        @click="() => onSubmit(name, option)"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "FileNameFormModal",
  props: {
    onSubmit: {
      type: Function
    },
    onClose: {
      type: Function
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    exportType: {
      type: Array,
      default: ['toWord', 'toExcel', 'toPdf', 'toInfo']
    },
    exportName: {
      type: String,
      default: '工作通报'
    },
    modalTitle: {
      type: String,
      default: ""
    }
  },
  watch: {
    dialogVisible(value) {
      this.visible = value;
    },
    exportName: {
      handler(value) {
        this.name = value
      },
      immediate: true
    }
  },
  computed: {
    device() {
      return this.$store.state.app.device;
    }
  },
  data() {
    return {
      visible: false,
      name: '工作通报',
      option: "toWord"
    };
  }
};
</script>
<style lang="scss">
.file-input-dialog {
  .el-select {
    width: 146px;
  }
}
</style>